<template>
	<view>
		<ABanner :isSeach="false" :highLight="highLight" @sendNum="handleTab" :menuList="['经期设置']"></ABanner>
		<!-- <ABannerTab :itemData="['经期设置']"></ABannerTab> -->
		<view class="container">
			<view v-for="(item,index) in setupList" :key='index'>
				<periodSetupCard @change1='change1' @change2='change2' :setup='item'> </periodSetupCard>
			</view>
		</view>

	</view>
</template>

<script>
	import setup1 from '@/pages/user/static/images/setup2.png'
	import setup2 from '@/pages/user/static/images/setup1.png'
	import {
		getMenstruationSetup,
		updateMenstruationSetup
	} from '../../../api/period'
	export default {
		data() {
			return {
				setupList: [{
						id: 1,
						content: "你的经期大概持续几天？",
						title: "经期长度",
						day: "5天",
						img: setup1,
						dayList: []
					},
					{
						id: 2,
						content: "两次经期开始日大概间隔多久？",
						title: "周期长度",
						day: "28天",
						img: setup2,
						dayList: []
					}
				]
			}
		},
		methods: {
			change1(val) {
				this.setupList[0].day = val
				updateMenstruationSetup({
					periodLong: val,
					cycleLong: this.setupList[1].day,
					intelligentPrediction: "否"
				}).then(res => {
					console.log(res)
				})
			},
			change2(val) {
				this.setupList[1].day = val
				updateMenstruationSetup({
					periodLong: this.setupList[0].day,
					cycleLong: val,
					intelligentPrediction: "否"
				}).then(res => {
					console.log(res)
				})
			},
			getSetup() {
				getMenstruationSetup().then(res => {
					this.setupList[0].day = res.data.periodLong
					this.setupList[1].day = res.data.cycleLong
				})
			}
		},
		onLoad() {
			for (let i = 3; i <= 15; i++) {
				this.setupList[0].dayList.push(i + "天")
			}
			for (let i = 17; i <= 60; i++) {
				this.setupList[1].dayList.push(i + "天")
			}
			this.getSetup()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		margin: 0 30rpx;
		margin-top: -70rpx;
		background-color: #fff;
		border-radius: 30rpx;
	}
</style>